<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>

    </style>
</head>

<body style="background-color: #FAFAFA;">

<div class="layui-container" style="width: auto;">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/header.html::header('主页')"></div>

            <!--            视频，轮播图-->
            <div class="layui-row layui-col-space10" style="margin-top: 5px">
                <!--         首页视频和话题-->
                <div class="layui-col-md8">
                    <!--                    话题-->
                    <div class="ui large feed" style="margin-top: 30px">
                        <div class="event" th:each="uat, iterStat:${#request.getAttribute('uats')}"
                             style="margin-bottom: 55px">
                            <div class="label">
                                <img th:src="${uat.img}">
                            </div>
                            <div class="content">
                                <div class="summary">
                                    <a class="user" th:href="@{/user/info/{id}(id=${uat.userId})}"
                                       th:text="${uat.username}"></a>
                                    <div class="date" th:text="${uat.time}"></div>
                                </div>
                                <div class="extra text"
                                     style="overflow: hidden;
                                     text-overflow: ellipsis;
                                     display: -webkit-box;
                                     -webkit-line-clamp: 3;/*想省略几行就写几*/
                                     -webkit-box-orient: vertical;">
                                    <a th:href="@{/topic/{id}(id=${uat.topicId})}" th:text="${uat.content}"></a>
                                </div>
                                <div class="meta">
                                    <a class="eye">
                                        <i class="eye icon"></i>
                                        <span th:text="${uat.view}"></span> Views
                                    </a>
                                    <a class="like">
                                        <i class="like icon"></i>
                                        <span th:text="${uat.start}"></span> Likes
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<!--     页尾-->
<div id="pageTail" style="background: #d2d2d2;height: 250px;margin-top: 560px;" th:fragment="pageTail" class="ui grid">
    <div class="ui two wide column"></div>
    <div class="ui twelve wide column" style="margin-top: 40px;font-weight: bolder;">
        <div style="margin-bottom: 20px"><i class="big qq icon"></i>： 2392429828</div>
        <div style="margin-bottom: 20px"><i class="big envelope outline icon"></i>： 2392429828@qq.com</div>
        <div style="margin-bottom: 20px"><i class="big github icon"></i>： <a href="https://github.com/Angenela">Angenela</a>
        </div>
        <div>使用的UI框架：
            <a href="https://semantic-ui.com/">SemanticUI</a>、
            <a href="https://www.layui.com">LayUI</a>
        </div>
    </div>
    <div class="ui two wide column"></div>
</div>

</body>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/semantic/semantic.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/my.js}"></script>

</html>
